<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/comment.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

<body>
    <div class="nav">
        <div class="head">
            <div class="head-img">
                <img src="./image/head1.jpeg" alt="aaawqeqweggggg" class="img">
            </div>
            <p id="username">我的博客网站</p>
        </div>
        <div class="funcBar">
            <div class="choice">
                <a href="#" class="choice-c">主页</a>
                <a href="#" class="choice-c">写博客</a>
                <a href="#" class="choice-c">注册</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="container-left">
            <div class="card">
                <div class="head-image">
                    <img src="./image/head2.jpeg" alt="g" id="head-image">
                </div>
                <div id="user-name-div">
                    <div id="user-name"><b>个人练习生</b></div>
                </div>
                <div id="github">
                    <a href="#" id="github-a">github</a>
                </div>
                <div id="card-bottom">
                    <div class="card-bottom-container">
                        <a href="#" id="wenzhang">文章</a>
                        <a href="#" id="fenlei">分类</a>
                    </div>
                    <div class="card-bottom-container">
                        <span>1</span>
                        <span>2</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-right">

        </div>

    </div>
    <script>
        let container_right = document.querySelector(".container-right");
        $.ajax({
            url: "blog_list",
            type:"GET",

            success: function (data) {
                for(let i=0;i<data.length;i++){
                    let container=document.querySelector(".container-right");
                    let div1=document.createElement("div");
                    let p1=document.createElement("p");
                    let b1=document.createElement("b");
                    let p2=document.createElement("p");
                    let p3=document.createElement("p");
                    let div2=document.createElement("div");
                    let button=document.createElement("button");
                    let a = document.createElement("a");

                    div1.className="blog-body";
                    p1.className="title";
                    p2.className="time";
                    p3.className="text-body";
                    div2.className="button";
                    button.className="view";
            // <!-- <div class="blog-body">
            //                 <p class="title"><b>我的第一篇博客</b></p>
            //                 <p  class="time">2022-11-9</p>
            //                 <p class="text-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est impedit optio quas quo dolores dolore vitae nihil facilis porro. Ullam blanditiis provident labore sunt soluta, unde vel. Fugiat, necessitatibus dolore.</p>
            //                 <div class="button">
            //                     <button class="view">查看全文&gt&gt</button>
            //                 </div>
            //             </div> -->
                    a.innerHTML="查看全文&gt&gt";
                
                    a.href="blog_view.html?blogId="+data[i].blogId;
                    a.style.color="black";
                    a.style.textDecoration="none";
                    // button.innerHTML="查看全文&gt&gt";
                    button.appendChild(a);
                    let b=document.createElement("b");

                    b.innerHTML=data[i].blogTitle;
                    p2.innerHTML=data[i].postTime;
                    p3.innerHTML=data[i].blogContent;
                    
                    p1.appendChild(b);
                    div2.appendChild(button);
                    div1.appendChild(p1);
                    div1.appendChild(p2);
                    div1.appendChild(p3);
                    div1.appendChild(div2);

                    container.appendChild(div1);
                }
                // let container_right=document.querySelector(".container-right");

                // let div1=document.createElement("div");
                // div1.className="blog-body";

                // let p1=document.createElement("p");
                // p1.className="title";

                // let b=document.createElement("b");

            }
        })
    </script>
</body>

</html>